<template>
  <!-- <div class="capabody">
    <img src="../../../assets/images/能力目录.jpg" width="100%">
    <div class="capability-nav">
      <div class="nav-first">服务目录:</div>
      <router-link to="/home/capability/capaAll" active-class="active"><div class="active-div"></div>全部</router-link>
      <router-link to="/home/capability/capaOne" active-class="active"><div class="active-div"></div>能力分类1</router-link>
      <router-link to="/home/capability/capaTwo" active-class="active"><div class="active-div"></div>能力分类2</router-link>
      <router-link to="/home/capability/capaThree" active-class="active"><div class="active-div"></div>能力分类3</router-link>
      <router-link to="/home/capability/capaFour" active-class="active"><div class="active-div"></div>能力分类4</router-link>

      <el-input placeholder="请输入内容" class="input-with-select">
        <i slot="prefix" class="el-icon-search search"></i>
      </el-input>

    </div>
  
   <keep-alive> <router-view></router-view></keep-alive>
   <div class="footer">
    <img src="../../../assets/images/foot_bj2.png">
   <div class="footbody">
      <div class="foot">
        <div>
         <router-link to=""><h3>快速入口</h3></router-link>
          <router-link to=""><p>新手专区</p></router-link>
          <router-link to=""><p>了解系统</p></router-link>
          <router-link to=""><p>使用指引</p></router-link>
          <router-link to=""><p>能力目录</p></router-link>
          <router-link to=""><p>开发资源</p></router-link>
          <router-link to=""><p>在线测试</p></router-link>
        </div>
        <div>
          <router-link to=""><h3>友情链接</h3></router-link>
          <router-link to=""><p>江西教育网</p></router-link>
          <router-link to=""><p>扶贫系统</p></router-link>
          <router-link to=""><p>终身学习帐号平台</p></router-link>
          <router-link to=""><p>管理门户</p></router-link>
          <router-link to=""><p>夸校选课平台</p></router-link>
          <router-link to=""><p>综合素质评价平台</p></router-link>
        </div>
        <div>
         <router-link to=""> <h3>关于我们</h3></router-link>
         <router-link to=""> <p>关注微信公众号</p></router-link>
        <router-link to="">  <p>QQ号</p></router-link>
          <router-link to=""><p>联系方式</p></router-link>
          <router-link to=""><p>地址</p></router-link>
          <router-link to=""><p>邮箱</p></router-link>
        </div>
        <div>
          <router-link to=""><h3>客户服务</h3></router-link>
          <router-link to=""><p>咨询与投诉</p></router-link>
        </div>
      </div>
   </div>
   </div>
  </div>
   -->


</template>
<script>

export default {
  name: 'capability',
  data() {
    return {
      active: 0,
      active1: 1,
    }
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0 auto;
  padding: 0;
}

.capabody {
  width: 100%;
  margin: 0 auto;
}

.capability-nav {
  display: flex;
  height: 50px;
  width: 100%;
  line-height: 50px;
  background-color: rgb(238, 238, 238);
  margin: -5px;
  box-shadow: 0px 1px 0 rgb(189, 189, 189);

  .nav-first {
    margin-left: 10%;
    min-width: 90px;
  }

  a {
    min-width: 150px;
    text-align: center;
    position: relative;
  }

  .el-input {
    width: 400px;
    margin-left: 200px;
  }

  .search {
    font-size: 25px;
    font-weight: 600;
    margin-left: 350px;
    margin-top: 12px;
  }
}

.active {
  background-color: rgb(7, 153, 254);
  color: white;

  .active-div {
    display: block;
    content: "";
    position: absolute;
    top: 50px;
    left: 40%;
    // left: -60px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgb(7, 153, 254);
  }
}

.footbody {
  margin: 0 auto;
}

.footer {
  margin-top: 50px;
  width: 100%;
  background-color: rgb(239, 249, 250);
  height: 350px;

  img {
    width: 100%;
    height: 20px;

  }

  .foot {
    display: flex;
    justify-self: center;
    width: 100vw;

    div {
      width: 500px;
      text-align: center;
      padding-left: 270px;
      box-sizing: border-box;

      h3 {
        text-align: left;
      }

      p {
        text-align: left;
        width: 170px;
        font-size: 15px;
      }

      &:hover {
        color: rgb(7, 153, 254);
      }
    }


  }

}
</style>